<template>
	<div class="forgetpass">
		
		<div class='head'>
            <p class='title-icon'>
            	<a class='iconfont icon-jiantouzuo' href="javascript:history.go(-1)"></a>
            </p>
            <p class='title-text'>忘记密码</p>
            <p class="title-null"></p>
      </div>   
		
		<div class="content">
			<div class="phone-box">
				<p>
					<span class="left">手机号：</span>
					<input type="text" placeholder="请输入手机号"/>
				</p>
			</div>
			<div class="problem">
				<p>
					<span class="left">问题1：</span>
					<select name="">
						<option value="">你初中同学叫什么名字</option>
					</select>
				</p>
				<p>
					<span class="left">回答：</span>
					<input type="text" placeholder="请填写答案"/>
				</p>
			</div>
			<div class="problem">
				<p>
					<span class="left">问题2：</span>
					<select name="">
						<option value="">你最拿手的菜是什么</option>
					</select>
				</p>
				<p>
					<span class="left">回答：</span>
					<input type="text" placeholder="请填写答案"/>
				</p>
			</div>
		</div>
		
		
		<div class="backpass">
			<p class="back-button">找回密码</p>
		</div>
		
	</div>
</template>

<script>
</script>

<style scoped>
	.forgetpass{
		height: 100vh;
		background-color: white;
	}
	.content{
	/*	margin-top: 20px;*/
	}
	.phone-box{
		height:40px;
		padding: 15px 15px 5px 15px;
		line-height: 40px;
		border-bottom: 1px #EBEBEB solid;
	}
	.problem{
		height: 70px;
		line-height: 40px;
		border-bottom: 1px #EBEBEB solid;
		padding: 15px;
	}
	.left{
		display: inline-block;
		width: 20%;
	}
	input,select{
		border: none;
		outline: none;
	}
	input:focus,select:focus{
		outline: none;
		border: none;
	}
	input{
		padding-left: 5px;
	}
	.backpass{
		width: 95%;
		margin: 30px auto;
	}
	.back-button{
		background-color: #71B4EB;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: white;
		border-radius: 4px;
	}
</style>